<template>
  <div class="bigBox">
    <Particle />
    <div class="main">
      <sidebar></sidebar>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import {
  reactive,
  ref,
  toRefs
} from 'vue'
export default {
  setup() {
    const state = reactive({});
    return {
      ...toRefs(state)
    };
  }
}
</script>

<style lang="scss" scoped>
.bigBox {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .main {
    width: 98%;
    height: 600px;
    display: flex;
    opacity: .7;

    .content {
      position: relative;
      flex: 1;
      -moz-box-shadow: 3px 0px 9px #bdc3c7;
      -webkit-box-shadow: 3px 0px 9px #bdc3c7;
      box-shadow: 3px 0px 9px #bdc3c7;
      border-radius: 0 20px 20px 0;
      padding: 40px;
      overflow: auto;

      &::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 100px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #ffffff;
      }

      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #ededed;
      }
    }
  }
}
</style>